import { define, Styled } from "../itag/index.js";

const [styled, css] = Styled.new();

css`
    :host {
        font-size: 0.8em;

        &::before {
            content: "[";
        }

        &::after {
            content: ")";
        }
    }
`;

export class RangeElement extends HTMLElement {
    /** 区间的起始位置 */
    #begin: number = 0;

    /** 自身长度 */
    #length: number = 0;

    readonly #sr: ShadowRoot;

    constructor() {
        super();
        this.#sr = this.attachShadow({ mode: "closed" });
        this.#sr.adoptedStyleSheets.push(styled.sheet);
    }

    get begin(): number {
        return this.#begin;
    }

    set begin(value: number) {
        this.#begin = value;
        this.#sr.textContent = `${this.#begin} - ${this.#begin + this.#length}`;
    }

    get length(): number {
        return this.#length;
    }

    set length(value: number) {
        this.#length = value;
        this.#sr.textContent = `${this.#begin} - ${this.#begin + this.#length}`;
    }
}

define(RangeElement);
